<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .el-textarea__inner, .el-input__inner {
            background: transparent !important;
            border: 2px solid hsla(0, 0%, 100%, .7);
        }

        /*弹窗开始*/
        /* 弹窗样式 */
        .msgbox {
            width: 400px;
            padding: 20px;
        }

        .msgbox-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .msgbox-content {
            margin-bottom: 20px;
        }

        .msgbox-content label {
            display: block;
            margin-bottom: 5px;
        }

        .msgbox-content input {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 10px;
        }

        .msgbox-buttons {
            text-align: right;
        }

        .msgbox-buttons button {
            margin-left: 10px;
        }

        /* 编辑信息弹窗*/





        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="background-color: #161823;height: 100%;color:#87878e;font-size: 14px">
<div id="app" v-cloak>
    <el-container>
        <!-- 1.左主体 -->
        <my-aside></my-aside>
        <!-- 2.右边栏 -->
        <el-main>
            <!-- 2.1右头边栏 -->
            <my-header></my-header>
            <!-- 2.2右主体 -->
            <el-footer>
                <!--        个人中心开始-->
                <!--       登录状态开始-->
                <el-row>
                    <el-col>
                        <div style="margin: 55px 0 24px 0 ;width: 723px;height: 100px;">
                            <img src="loginimgs/user_wei1.png"
                                 style="border: 1px solid #87878e; width: 112px; height: 112px; border-radius: 90px;">
                            <span style="position: absolute;margin:0 0 0 40px;">
                                <h1 style="color: white;font-size: 20px;font-weight:400;line-height: 28px;margin-bottom: 14px;">
                                 {{ 昵称 }}老孙
                                </h1>
                                <div>
                                    <span style=" font-size: 16px;">关注  {{}} </span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span style=" font-size: 16px;">粉丝  {{}} </span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span style=" font-size: 16px;">获赞  {{}} </span>
                                </div>
                            </span>
                        </div>

                        <!-- 编辑弹窗开始 -->
                        <el-button type="text" style="
                                color: white;
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                appearance: none;
                                outline: none;
                                background-color: #2c3e50;
                                cursor: pointer;margin-left: 1120px;
                                width: 80px;height: 36px;border-radius: 4px;"
                                   @click="dialogFormVisible = true">编辑信息</el-button>

                        <el-dialog style="width: 800px;margin-left: 380px;" title="编辑信息" :visible.sync="dialogFormVisible">
                            <el-form  :model="form">
                                <el-form-item label="头像"  :label-width="formLabelWidth">
                                    <img src="loginimgs/user_wei1.png"
                                         style="width: 120px;height: 120px;margin-left: 55px ;border: 1px solid #cccccc;border-radius: 100px">
                                </el-form-item>

                                <el-form-item label="名字"  :label-width="formLabelWidth">
                                    <el-input style="background-color: #cccccc;border: 2px solid #2c3e50;border-radius: 5px" v-model="form.name" ></el-input>
                                </el-form-item>

                                <el-form-item label="简介" :label-width="formLabelWidth">
                                    <el-input style="background-color: #cccccc;border: 2px solid #2c3e50;border-radius: 5px" v-model="form.content" ></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>

                        <!-- 编辑弹窗结束 -->


                        <div style="width: 1200px;height: 200px;margin: 10px 0px 24px;font-size: 20px">

                            <el-menu @select="handleClick"
                                     :default-active="activeIndex"
                                     mode="horizontal"
                                     class="el-menu-demo"
                                     background-color="#161823"
                                     active-text-color="#ffffff"
                                     style="text-decoration: none">
                                <el-menu-item index="1" style="font-size: 20px;"><span>作品</span>
                                </el-menu-item>
                                <el-menu-item index="2" style="font-size: 20px;"><span>收藏</span>
                                </el-menu-item>
                                <el-menu-item index="3" style="font-size: 20px;"><span>观看历史</span>
                                </el-menu-item>

                                <div style=" margin-top: 10px;float: right;">
                                    <el-input placeholder="请输入内容">
                                        <el-button slot="append" style="background-color: transparent"
                                                   icon="el-icon-search">搜索
                                        </el-button>
                                    </el-input>
                                </div>
                            </el-menu>

                        </div>
                    </el-col>

                </el-row>
                <!--       登录状态结束-->
                <!--        个人中心结束-->
            </el-footer>
        </el-main>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.js"></script>
</el-container>
</div>

<script src="js/aside.js"></script>
<script src="js/header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                appArr: [
                    {title: '直播'},
                    {title: '放映室'},
                    {title: '知识'},
                    {title: '热点'},
                    {title: '游戏'},
                    {title: '娱乐'},
                    {title: '二次元'},
                    {title: '音乐'},
                    {title: '美食'},
                    {title: '体育'},
                    {title: '时尚'}
                ],
                activeName: [],
                /*在登陆中三个页面库*/
                activeIndex: '1',
                /*编辑弹窗*/
                dialogFormVisible: false,
                form: {
                    img:'',
                    name: '',
                    content:'',

                },
                formLabelWidth: '80px'
            }
        },
        methods: {
            /*点击喜欢等跳转页面*/
            handleClick(key, keyPath) {
                if (key == 1) {
                    location.href = "user_Success.html";
                } else if (key == 2) {
                    location.href = "user_Success_collection.html";
                } else if (key == 3) {
                    location.href = "user_Success_histroy.html";
                }
            },

        }
    })
</script>
</html>